﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>湖南红太阳剧院</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
    <!--公有引用-->
   <link rel="stylesheet" th:href="@{/css/weui.css}" />
    <link rel="stylesheet" th:href="@{/css/weui2.css}" />
    <link rel="stylesheet" th:href="@{/css/weui3.css}" />
    <script th:src="@{/js/zepto.min.js}"></script>
    <script th:src="@{/js/zepto.cookie.min.js}"></script>
</head>
<body>
    <!--轮播广告-->
    <div class="slide">
        <ul>
            <li th:each="item:${bannerList}">
                <a th:href="@{${item.url}}">
                    <img th:src="${item.imgUrl}"  alt=""/>
                </a>
            </li>
        </ul>
        <div class="dot">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <!--列表-->
    <ul class="imglist">
        <li th:each="item:${advertList}">
            <a th:href="@{${item.url}}">
                <img th:src="${item.imgUrl}"  alt=""/>
            </a>
        </li>
    </ul>
    <!--底部导航-->
    <div class="weui-loadmore weui-loadmore-line">
        <span class="weui-loadmore-tips">暂无数据</span>
    </div>
    <div class="weui_tab tab-bottom">
        <div class="weui_tabbar">
            <a href="index.html" class="weui_tabbar_item">
                <div class="weui_tabbar_icon">
                    <img src="../images/icon_trailer_default.png" alt=""/>
                </div>
                <p class="weui_tabbar_label">预告</p>
            </a>
            <a th:href="@{/h5/list}" class="weui_tabbar_item">
                <div class="weui_tabbar_icon">
                    <img src="../images/icon_show_default.png" alt=""/>
                </div>
                <p class="weui_tabbar_label">演出</p>
            </a>
            <a  th:href="@{/h5/member}" class="weui_tabbar_item">
                <div class="weui_tabbar_icon">
                    <img src="../images/icon_mine_default.png" alt=""/>
                </div>
                <p class="weui_tabbar_label">我的</p>
            </a>
        </div>
    </div>
    <!--页面私有引用-->
    <script th:src="@{/js/swipe.js}"></script>
    <script type="text/javascript" th:inline="javascript">
        //图片轮播
        $(function () {
            var userId = [[${id}]];
            if(null!=userId)
            $.fn.cookie('userId',userId);
            else{
                $.fn.cookie('userId','root');
            }
            $('.slide').swipeSlide({
                autoSwipe: true,//自动切换
                speed: 3000,//速度
                continuousScroll: true,//连续滚动
                transitionType: 'cubic-bezier(0.22, 0.69, 0.72, 0.88)',//过渡动画linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier
                lazyLoad: true,//图片懒加载
                firstCallback: function (i, sum, me) {
                    //页面加载回调
                    me.find('.dot').children().first().addClass('cur');
                },
                callback: function (i, sum, me) {
                    //每次滚动回调
                    me.find('.dot').children().eq(i).addClass('cur').siblings().removeClass('cur');
                }
            });
        //底部导航
            var weui_tabbar = $(".weui_tabbar").children("a");
            weui_tabbar.eq(0).addClass("weui_bar_item_on").find("img").attr("src", "../images/icon_trailer_selected.png");
        });
    </script>
</body>
</html>
